<template>
  <n-card :title="title" style="background-color: #f9f9f9;align-items: center">
    <n-grid :cols="24" :x-gap="12" :y-gap="12">
      <n-gi v-if="editable&&!selectionMode" :span="1">
        <n-button @click="selectionMode = true">一改一大片</n-button>
      </n-gi>
      <n-gi v-if="editable&&selectionMode" :span="1">
        <n-button @click="exitSelectMode">我就一个个改</n-button>
      </n-gi>
      <n-gi :span="4" :offset="1">
        <n-button-group v-if="selectionMode">
          <n-button @click="setPublic">给大家瞅瞅</n-button>
          <n-button @click="setPersonal">不给你们看了！</n-button>
          <n-button @click="setDone">Finish😎</n-button>
          <n-button @click="setNotStart">先放放吧</n-button>
        </n-button-group>
      </n-gi>
      <n-gi :span="24">
        <n-data-table
            :columns="getColumns()"
            :data="data"
            :single-line="false"
            striped
            :max-height="tableMaxHeight"
            :row-class-name="rowClassName"
            :style="style"
            :row-key="row => row.id"
            @update:checked-row-keys="handleCheck"
            v-model:checked-row-keys="checkedRowKeys"
        />
        <br/>
        <n-pagination
            v-if="pagination"
            v-model:page="pageInfo.currentPage"
            :page-count="pageCount"
            v-model:page-size="pageInfo.pageSize"
            :page-sizes="[10,20,30]"
            size="medium"
            show-size-picker
            show-quick-jumper
            :on-update-page="onPageInfoChange"
            :on-update-page-size="onPageInfoChange"
        />
      </n-gi>
    </n-grid>
  </n-card>
</template>

<script setup>
import {h, inject, onMounted, ref, watch} from "vue";
import {NButton, NTag} from "naive-ui";
import {Circle, CircleCheck} from "@vicons/tabler"

const props = defineProps({
  title: {
    type: String
  },
  editable: {
    type: Boolean,
    default: false
  },
  index: {
    type: Boolean,
    default: false
  },
  columns: {
    required: true,
    type: Array,
  },
  data: {
    required: true,
    type: Array,
  },
  tableMaxHeight: {
    type: Number,
    default: window.innerHeight * 0.25
  },
  style: {
    type: String,
    default: ''
  },
  pagination: {
    type: Boolean,
    default: false
  },
  pageCount: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits([
  'onModify',
  'onClickDone',
  'onClickPublic',
  'onPageInfoChange',
  'onUpdatePublicStatus',
  'onUpdateStatus',
])

const getStatusTagType = inject('getStatusTagType')

const indexColumns = ref([
  {
    title: "#",
    key: "index",
    align: 'center',
    titleAlign: 'center',
    width: 50,
    render: (_, index) => {
      return `${(pageInfo.value.currentPage - 1) * pageInfo.value.pageSize + index + 1}`;
    }
  },
])

const selectionColumns = ref([
  {
    type: 'selection',
  }
])

const modifyColumns = ref([
  {
    title: '修改',
    key: 'operationModify',
    align: 'center',
    width: 60,
    render(row) {
      return h(
          NButton,
          {
            size: 'small',
            text: true,
            onClick: () => onClickModify(row)
          },
          {
            icon: () => {
              return h(Circle, {})
            }
          }
      )
    }
  }
])

const operationColumns = ref([
  {
    title: '公开',
    key: 'operationPublic',
    align: 'center',
    titleAlign: 'center',
    width: 60,
    render(row) {
      return h(
          NButton,
          {
            size: 'small',
            text: true,
            onClick: () => onClickPublic(row)
          },
          {
            icon: () => {
              let icon = row.public ? CircleCheck : Circle
              return h(icon, {})
            }
          }
      )
    }
  },
  {
    title: '完成',
    key: 'operationDone',
    align: 'center',
    width: 60,
    render(row) {
      return h(
          NButton,
          {
            size: 'small',
            text: true,
            onClick: () => onClickDone(row)
          },
          {
            icon: () => {
              let icon = row.status.code !== 4 ? Circle : CircleCheck
              return h(icon, {})
            }
          }
      )
    }
  }
])

const pageInfo = ref({
  currentPage: 1,
  pageSize: 10
})

const selectionMode = ref(false)

const checkedRowKeys = ref([])

const modifyRow = ref(null)

const showModifyModel = ref(false)

watch(() => props.data,
    value => {
      exitSelectMode()
    })

function getColumns() {
  let basicColumns
  let prefixColumns
  if (selectionMode.value) {
    prefixColumns = selectionColumns.value.concat(indexColumns.value)
    basicColumns = props.columns.concat([])
  } else {
    prefixColumns = indexColumns.value.concat(modifyColumns.value)
    basicColumns = props.columns.concat(operationColumns.value)
  }
  return prefixColumns.concat(basicColumns)
}

function rowClassName(row) {
  if (row.status.code === 2) {
    return 'abandon-task'
  }
  return ''
}

function onClickModify(row) {
  emit('onModify', row)
}

function onClickDone(row) {
  emit('onClickDone', [row.id], row.status.code !== 4 ? 4 : 1)
}

function onClickPublic(row) {
  emit('onClickPublic', [row.id], !row.public)
}

function onPageInfoChange() {
  emit('onPageInfoChange', pageInfo.value)
}

function handleCheck(rowKeys) {
  checkedRowKeys.value = rowKeys;
}

function exitSelectMode() {
  checkedRowKeys.value = []
  selectionMode.value = false
}

function setPublic() {
  emit('onUpdatePublicStatus', checkedRowKeys.value, true)
}

function setPersonal() {
  emit('onUpdatePublicStatus', checkedRowKeys.value, false)
}

function setDone() {
  emit('onUpdateStatus', checkedRowKeys.value, 4)
}

function setNotStart() {
  emit('onUpdateStatus', checkedRowKeys.value, 1)
}

</script>

<style scoped>
:deep(.abandon-task td) {
  color: red !important;
}
</style>